<template>
	<view class="container" >
		<view class="status_bar">
			<view style="margin-left: 3%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></view>
			</u-icon>
		</view>


		<view class="shop-box">
			<!-- <image src="../../../static/img/face.png" class="face"></image> -->
			<view class="con-box">
				<!-- <view class="title">哈哈哈</view> -->
				<!-- <img id='myQrCodeId' alt="二维码" src='http://123.57.231.99:8091/api/user/code/400096' class="qr-code" /> -->
				<img :src="qrCodeUrl" id="myQrCodeId" alt="二维码" class="qr-code" />
				<view class="add-friend">扫一扫扇面的二维码图案，加我为好友</view>
				<!-- <view class="qr-code-num">XOS邀请码:<span style="color: #0662e7;">{{info.inviteCode}}</span></view> -->
				<view class="link-num">{{inviteUrl}}</view>
			</view>
		</view>
		<view class="bottom-box">
			<!-- <view class="tab-num" @tap="toPage('/pages/mine/account/shareFriends')">
				<u-icon name="share-square" color="#1a76f1" bold:true size="22"></u-icon>
				<span>分享好友</span>
			</view> -->
			<view class="tab-num" style="background-color: #1a76f1;color: #fff;" @click="saveImage">
				<u-icon name="download" color="#fff" bold:true size="22"></u-icon>
				<span>保存二维码</span>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				value: '',
				value1: '',
				url: '"',
				show: true,
				show1: true,
				srcimg: '',
				passwordShow: true,
				passwordShow1: true,
				info: '',
				inviteCode: '',
				inviteUrl: '',
				qrCodeUrl: '', // 二维码的完整 URL: '',

			}
		},
		onLoad() {
			this.getlist()
			this.generateQrCodeUrl(); // 组件创建时生成 URL
			this.fetchQRCode()
		},
		methods: {
			generateQrCodeUrl() {
				// 从缓存中获取 userId
				const userId = uni.getStorageSync('userId');
				if (!userId) {
					console.error('用户ID不存在');
					return;
				}
				// 替换 URL 中的 userId
				this.qrCodeUrl = `http://123.57.231.99:8091/api/user/code/${userId}`;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			saveImage() {
				uni.downloadFile({
					url: this.qrCodeUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							// 下载成功，保存图片到相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功',
										icon: 'success',
									});
								},
								fail: (err) => {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none',
									});
									console.error(err);
								},
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none',
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none',
						});
						console.error(err);
					},
				});

			},
			getlist() {
				uni.request({
					url: this.$api.baseUrl + '/api/user/share-info',
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_id: uni.getStorageSync('userId')
					},
					method: 'POST',
					success: res => {
						uni.hideLoading()
						this.info = res.data.data;
						this.inviteCode = res.data.data['invite-code'];
						this.inviteUrl = res.data.data['invite-url'];
					},
					fail: res => {
						console.log(res);
					}

				})
			},


			// getlista() {
			// 	const userId = uni.getStorageSync('userId'); // 获取用户ID
			// 	const apiUrl = this.$api.baseUrl + '/api/user/code/' + userId; // 拼接URL

			// 	uni.request({
			// 		url: apiUrl, // 请求的URL
			// 		header: {
			// 			'content-type': 'application/json'
			// 		},
			// 		method: 'GET',
			// 		success: res => {},
			// 		fail: res => {
			// 			console.log(res);
			// 		}
			// 	});
			// },




			hexToBytes(hex) {
				let bytes = [];
				for (let i = 0; i < hex.length; i += 2) {
					bytes.push(parseInt(hex.substr(i, 2), 16));
				}
				return bytes;
			},


			// 十六进制字符串转换为字节数组的函数
			hexToBytes(hex) {
				let bytes = [];
				for (let c = 0; c < hex.length; c += 2) {
					bytes.push(parseInt(hex.substr(c, 2), 16));
				}
				return bytes;
			},


			
			
			oneye() {
				console.log(111)
				this.passwordShow = false
				this.show = false
			},
			oneyeOpen() {
				console.log(222)
				this.passwordShow = true
				this.show = true

			},
			oneye1() {
				this.passwordShow1 = false
				this.show1 = false
			},
			oneyeOpen1() {
				this.passwordShow1 = true
				this.show1 = true
			},
			change(e) {
				console.log('change', e);
			},
			change1(e) {
				console.log('change', e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 160upx;
	}


	.shop-box {
		height: 100%;
		background: #1a76f1;

		.face {
			width: 150upx;
			height: 150upx;
			border-radius: 30upx;
			position: absolute;
			left: 40%;
			top: 18.5%;
			z-index: 1;
		}

		.con-box {
			width: 84%;
			margin-left: 8%;
			height: 820upx;
			background-color: #fff;
			border-radius: 30upx;
			position: absolute;
			top: 320upx;

			.title {
				text-align: center;
				margin-top: 80upx;
				font-weight: bold;
			}

			.add-friend {
				margin-top: 16upx;
				text-align: center;
				color: #616161;
				font-size: 28upx;
			}

			.qr-code-num {
				text-align: center;
				margin-top: 16upx;
			}

			.link-num {
				width: 84%;
				margin-left: 7%;
				background: #ededed;
				padding: 8upx 12upx;
				border-radius: 30upx;
				text-align: center;
				margin-top: 16upx;
				font-size: 26upx;
			}
		}

		.qr-code {
			width: 70%;
			height: 52%;
			margin-left: 16%;
			margin-top: 30upx;
		}
	}

	.bottom-box {
		width: 100%;
		background-color: #fff;
		// margin-top: 18upx;
		border-radius: 30upx;
		padding: 20upx 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;

		image {
			width: 34upx;
			height: 34upx;
			padding: 10upx 28upx 0upx 10upx;
		}

		.tab-num {
			background: #edf4fe;
			padding: 16upx 64upx;
			border-radius: 14upx;
			color: #3d6fe0;
			font-weight: 300;
			display: flex;
		}
	}
</style>